*{
    margin:0;
    padding:0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
$bWidth:1200px;


#head_wrap{
      
        background:#f5f5f5;
        header{
            margin:0 auto;
            width:$bWidth;
            height:38px;
            background:#f5f5f5;
            position: relative;
            

            .left{
                width:150px;
                height:20px;
                float:left;
                margin-top:12px;
                
                h3{
                    color:#666;
                    font-size:12px;
                    font-weight: 100;

                }
            }

            .right{
                float:right;
                overflow:hidden;
                // border:1px solid black;
                // margin-top:14px;
               
                  li{
                        // border:1px solid black;
                        float:left;
                     
                        line-height: 38px;
                       
                        &:first-child a{
                            border-left:none;
                    }

                        &:nth-of-type(4) a{
                            margin-right:8px;
                        }

                    &:nth-of-type(4):hover{
                        background: white;
                        img{
                            // width:135px;
                            // height:135px;
                            display: block;
                        }
                    }
                    &:nth-of-type(5):hover{
                        background: white;
                        span{
                            display: block;
                           
                            }
                        }
                   
                    
                    &:nth-of-type(4) img{
                           
                          
                            // width:90px;
                            // height:90px;
                            position: absolute;
                            top:38px;
                            right:95px;
                            background:white;
                            display: none;
                          
                           
                            
                       
                    }


                    &:nth-of-type(5) span{
                        display: none;
                        width:850px;
                        height:400px;
                        border:1px solid #f5f5f5;
                        background:white;
                        position: absolute;
                        top:38px;
                        right:-20px;
                        padding-top:30px;
                        padding-left:50px;
                        z-index:1000;
                         h3{
                            font-size: 20px;
                            color:#d8d6d6;

                        
                        }

                    }
                    a{    
                        color:#666;
                        padding:0 12px;
                        font-size:12px;
                        border-left:1px solid #dbdbdb ;
                        
                        
                        .bg-icon {
                            display: inline-block;
                            width: 14px; 
                            height: 25px;
                            // border: 1px solid black;
                            // margin-right:6px;
                            vertical-align: text-top;
                            background: url(../img/icons_03.png) no-repeat -228px -11px;
                            
                        }
                        .bg-icon_nav{
                            display: inline-block;
                            width: 12px;
                            height: 8px;
                            // border:1px solid red;
                            vertical-align: middle;
                            margin-left: 4px;
                            // margin-right:4px;
                            background: url(../img/icons_03.png) no-repeat  -186px -16px;
                          
                        }

                      
                       
                       
                        span  ul li{
                                clear:both;
                                padding:0;
                                margin-top:30px;
                                font-size:14px;
                                &:hover{
                                    color:#ff7919;
                                }
                            }

                        &:hover {
                            color:#ff7919;
                            .bg-icon_nav{
                                background: url(../img/icons_03.png) no-repeat  -171px -16px;  
                            }
                            span{
                                color:#666;
                                // display:block;
                            
                            }                          
                        }
                     }
                 }
            }
        }
    }
            
        
    
    
    section{
       margin:0 auto;
       width: $bWidth;
       height:132px;
    //    background:green;
       padding-top:62px;
      .top{
           
          float:left;
          

           img{
            width:193px;
            height:65px;
             margin-right:36px;
           }
       }
     .local{
         float:left;
         padding-top:18px;
         margin-right:125px;
         position: relative;
         a{
           
             font-size:14px;
             color:#666;
         }
       &:hover .city{
             display:block

         }


         .bg-icon-city{
            display: inline-block;
            width:14px;
            height: 8px;
            vertical-align: middle;
            margin-left: 4px;
            background: url(../img/icons_03.png) no-repeat  -112px -19px;
         }
    
         div{
             width:93px;
             height:22px;
             border:2px solid #ebebeb;
             color:#b3b3b3;
             font-size:12px;
             line-height:22px;
             font-weight: 100;
             h4{
                 display: inline-block;
             }
             i{
                display: inline-block;
                width:12px;
                height: 17px;
                vertical-align: middle;
                margin-left: 4px;
                background: url(../img/icons_03.png) no-repeat  -85px -12px;
             }
         }
        
         .city{
            display: none;
            position: absolute;
            top: -6px;
            left: -20px;
            z-index: 100;
            width: 720px;
           min-height: 200px;
           overflow: scroll;
            // max-height: 500px;
            background: #fff;
            border: 1px solid #ebebeb;
            box-shadow: 0px 1px 2px #ccc;
            overflow-x: hidden;
            overflow-y: auto;
            padding-left :20px;
            padding-top:20px;
          
            .bg-icon-city{
                
                
                background: url(../img/icons_03.png) no-repeat  -112px -10px;
            }
            span{
                margin-left:60px;
                color:black;
                b{
                    color:#ff7919;
                }
            }
         }
    }   
    
    form{
        overflow: hidden;
      
        width:530px;
        // border:1px solid black;


      input{
          &:nth-of-type(1){
          display: block;
          width:446px;
          height:36px;
          border:2px solid #ff7919;
          float:left;
          padding-left:10px;
          font-size:14px;
          }
          &:nth-of-type(2){
             display: block;
              width:60px;
              height:40px;
              background:#ff7919;
              float:left;
              border:0;   
          }
        }
       
      
        ul{
            
            li{
                float: left;
                color:#999;
                font-size:12px;
                margin-right:16px;
                line-height:26px;
            }
        }
   }
 }
    nav{
    margin:0 auto;
    width: $bWidth;
    height:45px;
    position: relative;
    // background:blue;
    .nav_list1 
    
    {
        width:920px;
        // border:1px solid black;
        overflow: hidden;
        float:left;
    li{
        float:left;
        font-size: 18px;
        margin-left:46px;
        line-height:45px;
        &:nth-of-type(1){
            margin:0;
            padding:0 50px;
            background: #ff7919;
            a{
                color:white;
                font-weight:300;
                &:hover{
                    color:white;
                }
            } 
        }
        a{
            color:black;
            font-weight:900;
            &:hover{
                color:#ff7919;
            }
        }
      
        
    }
    }

    .nav_list2{
        width:180px;
        height:403px;
        background:#fafafa ;
        position: absolute;
        top:45px;
        padding-left:28px;
        z-index:1000;
        li{
            margin-top:22px;
            // border:1px solid red;
          
            a{  
                display: block;
                color:#7a7a7a;
                font-size:16px;
                width:128px;
                height:26px;
                position: relative;
                i{
                    display: inline-block;
                    width:30px;
                    height:26px; 
                    background: url(../img/icons_03.png) no-repeat  -4px -4px;
                }
            }
            b{ 
                display: inline-block;
                width:8px;
                height:8px;
                background: url(../img/icons_03.png) no-repeat  -474px -15px;
                position:absolute;
                top:13px;
                right:0;

            }
        }
    }
    img{
        float:right;
    }

 }





#ban_wrap{
    #banner{
        width:1200px;
        margin:0 auto;
        // border:1px solid black;
    }
}



















 #head2_wrap{
     background:white;


    header{
        width:1200px;
        height:82px;
        background:white;
        margin:0 auto;
        .logo{
            padding-top:15px;
            padding-left:240px;
            float:left;
            a{
               display: block;
                float: left;
                width: 160px;
                height: 51px;
                background-size:contain;
                // border:1px solid black;
                background: url(../img/juooo_logo.png) no-repeat ;
                background-size:100%;
            }
         }
    
    
         .title{
            float: left;
            margin-top: 16px;
            margin-left: 10px;
            padding-left: 20px;
            font-size: 26px;
            height: 50px;
            line-height: 50px;
            font-weight: normal;
            border-left: 2px solid #ccc;
            color: #232323;
        }
    }
    }






    #foot_wrap2{
        background:#f5f5f5;
    footer{
        overflow: hidden;
        width:1200px;
        min-height:300px;
        background:#f5f5f5;
        margin:0 auto;
        text-align: center;
        position: relative;
        margin-top:43px;
       
        ul {
            padding-left:360px;
           
         
            li{
                padding:10px 4px;
               
                float:left;
                a{
                    color:black;
                    border-right:1px solid black;
                    font-size:10px;
                    padding:0 4px;
                }
            }
        }
       
        p{
            display: block;
            float:left;
            position: absolute;
            left:0;
            right:0;
            top:40px;
            bottom:0;
            margin:auto;
            font-size:10px;
            color:#666;
            &:nth-of-type(2){
                top:60px;
            }
        }
    }
        
}
    
    

#foot_wrap{
    margin-top:30px;
    background:#f7f7f7; 
    
    footer{
   
    width:1200px;
    height:348px;
    margin:0 auto;
    border-top:1px solid #ececec;
    
    .top{
        background:white;
        height:157px;
        width:1200px;
        padding-top:23px;
        overflow: hidden;
        div{
            margin-left:10px;
            
            float: left;
            // border:1px solid black;
          
            font-size:12px;
            
         }
         .left{
            width:350px;
             h3{
                 line-height:60px;
                 font-size:16px;
             }
             ul{
                 overflow: hidden;
                 li{
                     float:left;
                     margin-right:40px;
                     line-height:30px;
                   
                     a{
                         color:#8b8b8b;
                     }
                 }
              }
           }
           .middle{
                width:490px;
                border-left:1px solid #ccc;
                border-right:1px solid #ccc;
              
               p{   
                    color:#8b8b8b;
                    text-align: center;
                    line-height: 30px;
                  
                   &:nth-of-type(1){
                       color:#ff6c02;
                       font-size:20px;
                       text-align: center;
                       line-height:60px;

                   }
               }
           }
           .right{
               padding-left:45px;
               div{
                     margin-left:50px;
                     margin-top:16px;
                   width:90px;
                   height:110px;
                   text-align: center;
                   color: #ccc;
               }
           }
        }
     }
     .bottom{
         width:1200px;
         height:170px;
        //  border:1px solid black;
         ul{
             overflow: hidden;
             margin-top:24px;
             &:nth-of-type(1) {
                margin-left:405px;
            }
            &:nth-of-type(2) {
                margin-left:290px;
            }

           
             li{
              
         
                border-right:2px solid #e3e3e3;
                 float:left;
                 font-size:12px;
                 
                
                 a{
                     color:#8c8c8c;
                     margin:0 16px;
                   
                 }
             }
         }
         p{
            color:#c0c0c0;
            font-size:10px;
            text-align: center;
            line-height:40px;
            
        }
        .last{
            height:50px;
            overflow: hidden;
            // border:1px solid black;
            position: relative;
            i{
                display: inline-block;
                width:84px;
                height:36px;
             
                // border:1px solid black;
                float:left;
                 position: absolute;
                 &:nth-of-type(1){
                    left:510px;
                    background: url(../img/icons_03.png) no-repeat -90px -133px;
                 }
                 &:nth-of-type(2){
                    left:605px;
                    background: url(../img/icons_03.png) no-repeat -183px -133px;
                 }
               
            }
        }
     }

    
    
}

